<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size: 20px;">牙况信息</span>
    <el-button @click="dialogVisible=true" type="primary"
               style="float:right;margin-top:13px;">新增牙况</el-button>
  </div>

  <!-- 牙况查询卡片 -->
  <el-card style="margin: 20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="用户姓名">
        <el-input placeholder="请输入用户姓名" style="width: 220px;" v-model="searchDentalForm.userName"
                  @keydown.enter="loadDental"></el-input>
      </el-form-item>

      <el-form-item label="医生姓名">
        <el-input placeholder="请输入医生姓名" style="width: 220px;" v-model="searchDentalForm.doctorName"
                  @keydown.enter="loadDental"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadDental">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 显示牙况表格 -->
  <el-card style="margin:20px;">
    <el-table :data="dentalArr">
      <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
      <el-table-column prop="userName" label="用户姓名" align="center"></el-table-column>
      <el-table-column prop="appeal" label="主诉" align="center"></el-table-column>
      <el-table-column prop="present" label="现病史" align="center"></el-table-column>
      <el-table-column prop="past" label="过往病史" align="center"></el-table-column>
      <el-table-column prop="allergy" label="过敏史" align="center"></el-table-column>
      <el-table-column prop="inspect" label="检查" align="center"></el-table-column>
      <el-table-column prop="treatment" label="治疗" align="center"></el-table-column>
      <el-table-column prop="createTime" label="就诊时间" align="center"></el-table-column>
      <el-table-column prop="updateTime" label="复诊时间" align="center"></el-table-column>
      <el-table-column prop="doctorName" label="医生姓名" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="edit(scope.row.id)">编辑</el-button>
          <el-button link type="primary" size="small" @click="deleteDental(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!--编辑牙况弹窗-->
  <el-dialog :title="dialogTitle" v-model="dialogVisible" :before-close="handleClose"
             style="width:1000px;padding:40px;">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="50">
        <el-col :span="12">
          <el-form-item label="用户名称">
            <el-input placeholder="请输入用户名称" v-model="saveDentalForm.userName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="医生名称">
            <el-input placeholder="请输医生名称" v-model="saveDentalForm.doctorName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="50">
        <el-col :span="12">
          <el-form-item label="就诊时间">
            <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                            v-model="saveDentalForm.createTime"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="复诊时间">
            <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                            v-model="saveDentalForm.updateTime"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="50">
        <el-col :span="12">
          <el-form-item label="主诉">
            <el-input placeholder="请输入主诉" v-model="saveDentalForm.appeal"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="检查结果">
            <el-input placeholder="请输入检查结果" v-model="saveDentalForm.inspect"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="50">
        <el-col :span="12">
          <el-form-item label="现病史">
            <el-input placeholder="请输入现病史" v-model="saveDentalForm.present"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="过往病史">
            <el-input placeholder="请输入过往病史" v-model="saveDentalForm.past"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="50">
        <el-col :span="12">
          <el-form-item label="过敏史">
            <el-input placeholder="请输入过敏史" v-model="saveDentalForm.allergy"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="治疗方案">
            <el-input placeholder="请输入治疗方案" v-model="saveDentalForm.treatment"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button @click="saveDental" type="primary">保存</el-button>
    </template>
  </el-dialog>

</template>
<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";

//定义变量控制弹窗标题
const dialogTitle = ref('新增牙况');
//定义变量控制弹窗是否显示
const dialogVisible = ref(false);
//实现关闭功能
const handleClose = () => {
  if (confirm('是否关闭本窗口?')) {
    //用户确认关闭后,将弹窗关闭且将表单数据清空
    dialogVisible.value = false;
    //saveUserForm.value = {};
  }
};

//准备对象用来修改牙况的表单信息
const saveDentalForm = ref({
  id: '',
  userName: '',
  doctorName: '',
  appeal: '',
  present: '',
  past: '',
  allergy: '',
  inspect: '',
  treatment: '',
  createTime: '',
  updateTime: '',
});

//编辑牙况按钮
const edit = (dentalId) => {
  dialogTitle.value = '编辑牙况';
  dialogVisible.value = true;
  axios.get(BASE_URL + '/v1/dental/selectById/' + dentalId).then((response) => {
    if (response.data.code == 2000) {
      console.log(response.data.data);
      saveDentalForm.value = response.data.data[0];
    } else {
      ElMessage.error(response.data.msg);
    }
  })
};

//保存修改牙况
const saveDental = () => {
  let data = qs.stringify(saveDentalForm.value);
  console.log(data);
  axios.post(BASE_URL + '/v1/dental/save', data).then((response) => {
    if (response.data.code == 2000) {
      ElMessage.success('保存成功!');
    }else {
      ElMessage.error(response.data.msg);
    }

  })
};

//定义数组用来装牙况列表数据
const dentalArr = ref([]);

//定义对象保存查询条件
const searchDentalForm = ref({
  userName: '',
  doctorName: '',
});

//重置牙况搜索信息
const resetSearch = () => {
  searchDentalForm.value = {};//清空牙况搜索表单数据
  loadDental();//重新加载牙况数据
};

//定义加载牙况的方法
const loadDental = () => {
  //有条件则根据条件查牙况数据,没有条件默认查所有牙况数据
  let data = qs.stringify(searchDentalForm.value);
  console.log(data);
  axios.get(BASE_URL + '/v1/dental/select?' + data).then((response) => {
    if (response.data.code == 2000) {
      console.log(response.data.data);
      dentalArr.value = response.data.data;
    } else {
      ElMessage.error(response.data.msg);
    }
  })
};

//一进页面加载
onMounted(() => {
  loadDental();
});


//删除牙况方法
const deleteDental = (dentalId)=>{
  if (confirm('您确认要删除该牙况吗?')){
    axios.post(BASE_URL+'/v1/dental/delete/'+dentalId).then((response)=>{
      if (response.data.code==2000){
        ElMessage.success('删除成功!');
        loadDental();
      }else{
        ElMessage.error(response.data.msg);
      }
    })
  }
};
</script>
<style scoped>

</style>